<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text>我的订单</text>
    </view>
    <view class="order-container">
      <block v-for="(item,index) in orderInfo" :key="index">
        <view class="order-box">
          <view class="order-main">
            <view class="image">
              <image :src="item.mainImageUrl" mode=""></image>
            </view>
            <view class="order-Info">
              <view class="order-name">
                {{item.productName}}
              </view>
              <view class="order-color">
                {{item.color}}
              </view>
              <view class="order-size">
                {{item.size}}
              </view>
            </view>
            <view class="order-detail">
              <view class="order-status">
                {{item.status}}
              </view>
              <view class="order-count">
                <uni-icons type="closeempty" size="12"></uni-icons>{{item.quantity}}
              </view>
            </view>
          </view>
          <view class="order-footer">
            <view class="order-time">
              <uni-dateformat :date="item.orderDate" format='yyyy-MM-dd hh:mm:ss'></uni-dateformat>
            </view>
            <view class="order-price">
              <text class="name">实付</text>
              <text class="priceValue"> {{item.totalPoints}}</text>
              <text class="name">积分</text>
              <text class="sign">| ￥</text>
              <text class="cashValue">{{item.totalCash}}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        orderInfo: [],
        page: 1,
        pagesize: 5,
      };
    },
    onLoad() {
      this.getOrderInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getOrderInfo() {
        const data = await uni.$http.post(`/users/order/page/${this.userInfo.studentId}`, {
          page: this.page,
          pagesize: this.pagesize
        })
        this.orderInfo = data.data.data.records
        console.log(data);
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;

    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .order-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .order-box {
      display: flex;
      flex-direction: column;
      width: 98%;
      border-radius: 20rpx;
      margin-top: 20rpx;
      padding: 20rpx 30rpx;
      background-color: #fff;
      box-sizing: border-box;

      .order-main {
        display: flex;
        justify-content: space-between;

        .image {
          width: 170rpx;
          height: 170rpx;
          border-radius: 20rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .order-Info {
          width: 350rpx;
          margin-left: 10rpx;
          padding: 10rpx 0;
          font-size: 30rpx;

          .order-name {}

          .order-color,
          .order-size {
            margin-top: 20rpx;
            color: #888;
          }
        }

        .order-detail {
          .order-status {
            margin-top: 20rpx;
            font-size: 30rpx;
            color: #b6edaa;
          }

          .order-count {
            margin-top: 20rpx;
          }
        }
      }

      .order-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;

        .order-time {
          height: 40rpx;
          line-height: 40rpx;
          font-size: 30rpx;
          color: #666;
        }

        .order-price {
          height: 40rpx;
          line-height: 40rpx;

          .name {
            font-size: 30rpx;
            color: #666;
          }

          .priceValue {
            font-size: 40rpx;
            color: #b6edaa;
          }

          .sign {
            font-size: 30rpx;
          }

          .cashValue {
            color: #b6edaa;
          }
        }
      }
    }
  }
</style>